
<template>

	<div>
		<div class="displayFlexBet" style="margin-bottom: 10px;">
			<div></div>
			<el-button @click="visible1 = true" icon="el-icon-plus" type="primary" size="mini">新增排线</el-button>
		</div>

		<div style="background: #f5f5f5;">
			<el-table :data="dataList" style="background: #fff;border-radius: 4px;" size="mini" border stripe>
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="outletName" label="排口">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-popover placement="top" width="160" trigger="click">
							<p>是否确认删除？</p>
							<div style="text-align: right; margin: 0">
								<!-- <el-button size="mini" type="text" @click="visible2 = false">取消</el-button> -->
								<el-button type="primary" size="mini" @click="deleteById(scope.row)">确定</el-button>
							</div>
							<el-button slot="reference" type="text" size="small" style="color: brown;">删除</el-button>
						</el-popover>

						<el-button @click="batchPrint(scope.row)" type="text" size="small"
							style="color: cornflowerblue;margin-left: 10px;">打印</el-button>

						<el-button @click="gotoSetting(scope.row)" type="text" size="small"
							style="color: cornflowerblue;margin-left: 10px;">配置</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog :visible.sync="visible1" title="排口选择" width="30%">
			<el-form ref="form" label-width="120px">
				<el-form-item label="排口" prop="pollutionName">
					<el-select v-model="outletId" placeholder="请选择">
						<el-option v-for="item in outletList" :key="item.id" :label="item.waterOutletName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item style="text-align: center;margin-left: -90px!important;">
					<el-button type="primary" @click="saveOrUpdate">保存</el-button>
					<el-button @click="cancle">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog :visible.sync="visible2" title="打印预览">
			<div id="print_selectedqr" style="text-align: center;width: 100%;">
				<div v-for="(item,index) in printDataList" :key="index" style=" display: inline-block;width: 25%;">
					<vue-qr :text="item.id" :size="160" />
					<div style="color: #333;margin: 10rpx 0 20rpx;text-align: center;">
						{{item.label}}
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible2 = false">取 消</el-button>
				<el-button type="primary" v-print="'#print_selectedqr'">批量打印</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
	import print from 'vue-print-nb'
	import VueQr from 'vue-qr'
	let that
	export default {
		directives: {
			print
		},
		components: {
			VueQr
		},
		data() {
			return {
				params: {},
				visible1: false,
				visible2: false,
				outletList: [],
				dataList: [],
				outletId: '',
				printDataList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getWaterOutletBaseList()
			that.pageWaterOutletLine()
		},

		methods: {
			getWaterOutletBaseList() {
				that.ajax({
					url: '/waterOutlet/getWaterOutletBaseList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data
						}
					},
				})
			},

			pageWaterOutletLine() {
				that.ajax({
					url: '/waterOutletLine/pageWaterOutletLine' + '?ticketId=' + that.params
						.ticketId + '&pageIndex=1&pageSize=999',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
						}
					},
				})
			},

			cancle() {
				//that.form = that.$options.data().form
				that.visible1 = false
			},

			deleteById(item) {
				that.ajax({
					url: '/waterOutletLine/deleteById',
					data: {
						id: item.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.pageWaterOutletLine()
						}
					},
				})
			},

			batchPrint(item) {
				that.printDataList = []
				let printDataList = []
				that.ajax({
					url: '/waterOutletLine/getWaterOutletNodeByMainId',
					data: {
						mainId: item.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data && result.data.children && result.data.children.length > 0) {
							that.batchFetData(result.data.children)
							that.visible2 = true
						} else {
							that.$message.error("暂无配置内容")
						}
					},
				})
			},

			batchFetData(arr) {
				for (let item of arr) {
					let thisItem = JSON.parse(JSON.stringify(item))
					delete thisItem.children
					that.printDataList.push(thisItem)
					if (item.children) {
						that.batchFetData(item.children)
					}
				}
			},

			gotoSetting(item) {
				that.ajax({
					url: '/waterOutletLine/getWaterOutletNodeByMainId',
					data: {
						mainId: item.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						item.jsonData = JSON.stringify(result.data)
						localStorage.setItem("outlet", JSON.stringify(item))
						that.$router.push("/wasteWater/waterOutletLineSetting?ticketId=" + that.$store.state.token)
					},
				})
			},

			saveOrUpdate() {
				if (that.outletId) {
					that.ajax({
						url: '/waterOutletLine/saveWaterOutletLine',
						data: JSON.stringify({
							outletId: that.outletId
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								that.visible1 = false
								that.pageWaterOutletLine()
							}
						},
					})
				} else {
					that.$message.error("请选择排口")
				}
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>